<template>
  <div class="flex-1 m-l-15">
    <el-tabs v-model="activeName" @tab-click="changeTab">
      <el-tab-pane label="平仓明细" name="1">
            <el-table
              size="mini"
              highlight-current-row
              class="view-table-tab"
              :data="tableData"
              border
              style="width: calc(100vw - 550px)">

              <el-table-column
              prop="dealtime"
              align="center"
              label="平仓时间">
                  <template slot-scope="scope">
                  <div  class=" fz-14 C_333">{{  moment.unix(scope.row.dealtime).format('YYYY-MM-DD HH:mm:ss') }}</div>
                  </template>
              </el-table-column>

              <el-table-column
              prop="contract"
              align="center"
              label="合约">
              </el-table-column>

              <el-table-column
              prop="risefall"
              align="center"
              label="买卖">
              <template slot-scope="scope">
                  <div  class=" fz-14 C_333">{{ scope.row.risefall == 'rise' ? '买':'卖'}}</div>
                  </template>
              </el-table-column>

               <el-table-column
              prop="closeprice"
              align="center"
              label="成交价">
              </el-table-column>

              <el-table-column
              prop="volume"
              align="center"
              label="数量">
              </el-table-column>

              <el-table-column
              prop="playprice"
              align="center"
              label="开仓均价">
              </el-table-column>


              <el-table-column
              prop="yk"
              align="center"
              label="持仓盈亏">
              </el-table-column>
              
              <el-table-column
              prop="codename"
              align="center"
              label="合约名称">
              </el-table-column>

              <el-table-column
              prop="rate"
              align="center"
              label="币种">
              </el-table-column>

            </el-table>
      </el-tab-pane>
      <el-tab-pane label="持仓明细" name="2">
            <el-table
              size="mini"
              highlight-current-row
               class="view-table-tab"
              :data="tableData"
              border
              style="width: calc(100vw - 550px)">

               <el-table-column
              prop="contract"
              align="center"
              label="合约">
              </el-table-column>

               <el-table-column
              prop="risefall"
              align="center"
              label="买卖">
              <template slot-scope="scope">
                  <div  class=" fz-14 C_333">{{ scope.row.risefall == 'rise' ? '买':'卖'}}</div>
                  </template>
              </el-table-column>

              <el-table-column
              prop="volume"
              align="center"
              label="数量">
              </el-table-column>

              <el-table-column
              prop="playprice"
              align="center"
              label="开仓均价">
              </el-table-column>

              <el-table-column
              prop="yk"
              align="center"
              label="持仓盈亏">
              </el-table-column>

              <el-table-column
              prop="margin"
              align="center"
              label="保证金占用">
              </el-table-column>

              <el-table-column
              prop="rate"
              align="center"
              label="币种">
              </el-table-column>
              <el-table-column
              prop="codename"
              align="center"
              label="合约名称">
              </el-table-column>
            </el-table>
      </el-tab-pane>
      <el-tab-pane label="持仓汇总" name="3">
            <el-table
              size="mini"
              highlight-current-row
               class="view-table-tab"
              :data="tableData"
              border
              style="width: calc(100vw - 550px)">

              <el-table-column
              prop="contract"
              align="center"
              label="合约">
              </el-table-column>

               <el-table-column
              prop="risefall"
              align="center"
              label="买卖">
              <template slot-scope="scope">
                  <div  class=" fz-14 C_333">{{ scope.row.risefall == 'rise' ? '买':'卖'}}</div>
                  </template>
              </el-table-column>

              <el-table-column
              prop="sumvol"
              align="center"
              label="数量">
              </el-table-column>

              <el-table-column
              prop="avgprice"
              align="center"
              label="开仓均价">
              </el-table-column>

              <el-table-column
              prop="sumyk"
              align="center"
              label="持仓盈亏">
              </el-table-column>

              <el-table-column
              prop="summargin"
              align="center"
              label="保证金占用">
              </el-table-column>

              <el-table-column
              prop="rate"
              align="center"
              label="币种">
              </el-table-column>
              <el-table-column
              prop="codename"
              align="center"
              label="合约名称">
              </el-table-column>
            </el-table>
      </el-tab-pane>
    </el-tabs>
    
  </div>
</template>

<script>
import { mapState } from 'vuex';
import moment from 'moment'
export default {
  props: ['date'],
  components: {
    
  },
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
    ticket: state => state.trade.ticket /* 推送数据 */,
    optionlist: state => state.trade.optionlist /* 全部合约代码 */
  }),
  watch: {
    ticket:{
　　　　handler: function(val) {
        
　　　　},
      immediate: true,
　　　 deep:true
　　},
  },
  data() {
    return {
      activeName: '1',
      moment: moment,
      selectItem: {},
      tableData: []
    };
  },
  created: function() {
    this.getData();
  },
  methods: {
    changeTab() {
      this.getData()
    },
    getData() {
      if (this.activeName == 1) {
        this.getList1()
      } else if (this.activeName == 2) {
        this.getList2()
      } else {
        this.getList3()
      }
    },
    getList3() {
       let startday = this.date[0]
       let endday = this.date[1]
       this.$get('/funds/chicangallorders',{startday:startday, endday: endday }).then(res => {
         this.tableData = res.data
       })
    },
    getList2() {
       let startday = this.date[0]
       let endday = this.date[1]
       this.$get('/funds/chicangorders',{startday:startday, endday: endday }).then(res => {
         this.tableData = res.data
       })
    },
    getList1() {
       let startday = this.date[0]
       let endday = this.date[1]
       this.$get('/funds/pingcangorders',{startday:startday, endday: endday }).then(res => {
         this.tableData = res.data
       })
    }
  }
};
</script>

<style scoped lang="less">
</style>
